<!-- 碳排放-城市高质量发展耦合协调度影响因素指标体系 -->
<template>
  <div id="app">
    <div class="carbo_title">
      <div class="carbo_title_left">
        <svg-icon name="more" width="38px" height="24px"></svg-icon>
      </div>
      <div class="carbo_title_right">
        <span>碳排放-城市高质量发展耦合协调度影响因素指标体系</span>
      </div>
    </div>
    <div class="title_line">
      <svg-icon name="fengexianxiangyou" width="713px" height="16px"></svg-icon>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 94%; height: 100%; overflow: auto"
        class="custom-table"
      >
        <el-table-column
          type="index"
          align="center"
          class="custom-cell"
          width="130"
        ></el-table-column>

        <el-table-column
          prop="name"
          label="指标名称"
          width="340"
          align="center"
        />
        <el-table-column
          prop="unit"
          label="指标单位"
          width="200"
          align="center"
        />
        <el-table-column prop="data" label="数据" width="340" align="center" />
        <el-table-column
          prop="attribute"
          label="指数属性"
          width="220"
          align="center"
        />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              @click="editRow(scope.row)"
              color="#2860a5"
              style="width: 52px"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              @click="deleteRow(scope.row)"
              color="red"
              style="width: 52px"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="editDialogVisible" title="编辑" width="500">
        <el-form :model="form">
          <el-form-item label="名称">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveEdit()">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'

// 定义表格数据类型
// 模拟表格数据
import { TableRow } from '../../../apis/analyze/type'

import { analyzeStore } from '@/store/modules/analyze'
// import { number } from 'echarts'
const tableData = [
  {
    id: 1,
    name: '废水排放总量',
    unit: '万吨',
    data: '13.0',
    attribute: '预期性指标',
    vant: '',
  },
  {
    id: 2,
    name: '环境空气质量达标率',
    unit: '%',
    data: '50',
    attribute: '约束指标',
    vant: '',
  },
  {
    id: 3,
    name: '万元GDP电耗',
    unit: '万元/千瓦时',
    data: '4.6',
    attribute: '约束指标',
    vant: '',
  },
  {
    id: 4,
    name: '规模以上废弃资源综合利用业总产值',
    unit: '亿元',
    data: '4.56',
    attribute: '预期性指标',
    vant: '',
  },
  {
    id: 5,
    name: '森林覆盖率',
    unit: '%',
    data: '36',
    attribute: '预期性指标',
    vant: '',
  },
  {
    id: 6,
    name: '生态环境状况指数',
    unit: 'EI指数',
    data: '66',
    attribute: '预期性指标',
    vant: '',
  },
  {
    id: 7,
    name: '商品进出口总值',
    unit: '亿元',
    data: '77',
    attribute: '预期性指标',
    vant: '',
  },
]
const useAnalyzeStore = analyzeStore()

const editDialogVisible = computed(
  () => useAnalyzeStore.editDialogVisible as boolean,
)
const form = ref<TableRow>({
  id: 0,
  name: '',
  unit: '',
  data: '32',
  attribute: '',
  vant: '',
})
const editRow = (row: TableRow) => {
  useAnalyzeStore.setEditDialogVisible(true)
  // editForm.value = { ...row }
  form.value = row
}
const saveEdit = async () => {}

// 获取内容
const fetchData = async () => {}
onMounted(() => {
  fetchData()
})

const deleteRow = async (rowData: TableRow) => {
  // console.log(`删除第 ${index} 行`)
  // console.log(id);
}
</script>

<style lang="scss" scoped>
#app {
  background-color: #072658 !important;
  // margin-top: 10px;
  .carbo_title {
    padding-top: 13px;
    // margin-top: 15px;
    display: flex;
    width: 100%;
    height: 43px;
    // background: pink;
    .carbo_title_left {
      margin-left: 18px;
      width: 38px;
      height: 31px;
      // background: green;
    }
    .carbo_title_right {
      margin-left: 7px;
      width: 508px;
      height: 31px;
      // background: skyblue;
      span {
        font-size: 20px;
        color: #d9f3f5;
        line-height: 22px;
        text-align: center;
      }
    }
  }
}
.el-button {
  background-color: var(
    --el - button - bg - color
  ); /* 使用Element Plus的变量恢复背景色 */
  border: 1px solid var(--el - button - border - color); /* 恢复边框 */
  /* 其他可能需要恢复的样式，如字体颜色等 */
  color: var(--el - button - text - color);
}

.table-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  margin-left: -5px;
  // border-color: #8e0303;
  :deep(.el-table) {
    border: 2px solid #004082;
    // 外边框
    .el-table__cell {
      // 内边框
      border: 2px solid #004082;
      background-color: #092e6a;
      color: white;
    }
    tr:hover > td {
      background-color: #072658;
    }
  }
}

// 操作按钮列特殊样式
::v-deep .el-table__row {
  .el-button {
    border-radius: 4px;
    padding: 6px 35px;
    font-size: 12px;
    margin-right: 20px;
  }
}
// 横向边框颜色

// .line {
//   width: 700px;
//   height: 5px;
//   background-color: #134382;
//   margin-top: 7px;
// }
::v-deep .el-message-box__btns > button > span {
  padding: 0;
  border: 0;
  color: rgb(53, 139, 226) !important;
}
</style>
